<template>
  	<ul class="nav-wrapper">
      <li @click="_toActivity(411)">校本课程</li>
      <li @click="_toActivity(412)">创新实验室</li>
      <li @click="_toActivity(431)">科普基地</li>
      <li @click="_toActivity(432)">自然营地</li>
      <li @click="_toActivity(433)">社区科技课</li>
      <li @click="_toActivity(454)">公众科学</li>
      <li @click="_toActivity(456)">研学路线</li>
      <li @click="_toActivity(457)">信息化服务</li>
      <li @click="_toActivity(549)">科技艺术</li>
      <li @click="_toActivity(713)">明日之星</li>
    </ul>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {}
  },
  methods: {
    _toActivity (id) {
      this.$router.push({
        path: '/personal/activity',
        query: {
          type: {
            id: id
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.nav-wrapper{
    display: flex;
    width: 100%;
    height: 330px;
    background-color: #ffffff;
    flex-wrap: wrap;
    li{
      width: 20%;
      height: 165px;
      box-sizing:border-box;
      padding-top: 125px;
      background: url('../assets/image/icon/icon_nav_1.png') no-repeat;
      background-size: 80px 93px;
      background-position: center 19px;
      text-align: center;
      font-size: 20px;
      color: #333333;
      &:nth-child(2) {
        background-image: url('../assets/image/icon/icon_nav_2.png')
      }
      &:nth-child(3) {
        background-image: url('../assets/image/icon/icon_nav_3.png')
      }
      &:nth-child(4) {
        background-image: url('../assets/image/icon/icon_nav_4.png')
      }
      &:nth-child(5) {
        background-image: url('../assets/image/icon/icon_nav_5.png')
      }
      &:nth-child(6) {
        background-image: url('../assets/image/icon/icon_nav_6.png')
      }
      &:nth-child(7) {
        background-image: url('../assets/image/icon/icon_nav_7.png')
      }
      &:nth-child(8) {
        background-image: url('../assets/image/icon/icon_nav_8.png')
      }
      &:nth-child(9) {
        background-image: url('../assets/image/icon/icon_nav_9.png')
      }
      &:nth-child(10) {
        background-image: url('../assets/image/icon/icon_nav_10.png')
      }
    }
  }

</style>
